<extend file='../master'/>
<link rel="stylesheet" href="{{__TEMPLATE__}}/css/css2.css">
<block name="content">
<div class="well well-sm">
    添加图文素材
</div>
<form action="" id="form" ng-controller="ctrl" method="post" class="form-horizontal" role="form">
<div class="container-fluid">
    <div class="row">
		<div class="col-xs-4">
			<div class="view">
				<div class="big" ng-click="changeActive(k)" ng-repeat="(k,v) in data.articles" ng-if="$first">
					<img ng-src="@{{v.thumb}}">
					<div class="text" ng-bind="v.title"></div>
				</div>
				<div class="small" ng-click="changeActive(k)" ng-repeat="(k,v) in data.articles" ng-if="!$first">
					<div class="text" ng-bind="v.title"></div>
					<div class="img">
						<img src="@{{v.thumb}}">
					</div>
				</div>
			</div>
			<br>
			<button type="button" class="btn btn-succes" ng-click="add()">添加图文</button>
		</div>
		<div class="col-xs-8">
			<div class="panel panel-default">
				<div class="panel-body">
					<div class="form-group">
                        <label for="" class="col-sm-2 control-label">标题</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" ng-model="active.title">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label">摘要</label>
                        <div class="col-sm-10">
                            <textarea name="" class="form-control" rows="3" ng-model="active.digest"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label">图片</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <input type="text" class="form-control" readonly="" ng-model="active.thumb">
                                <div class="input-group-btn">
                                    <button ng-click="upImage()" class="btn btn-default" type="button">选择图片</button>
                                </div>
                            </div>
                            <div class="input-group" style="margin-top:5px;">
                                <img ng-src="@{{active.thumb}}" class="img-responsive img-thumbnail" width="150">
                                <em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片" onclick="removeImg(this)">×</em>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" >
                        <label for="" class="col-sm-2 control-label">内容</label>
                        <div class="col-sm-10">
                            <textarea ng-model="active.content" id="container" style="height:300px;width:100%;"></textarea>
                        </div>
                    </div>
                    <div class="form-group" >
                        <label for="" class="col-sm-2 control-label">链接</label>
                        <div class="col-sm-10">
                            <input type="text" ng-model="active.content_source_url" class="form-control" id="" placeholder="">
                        </div>
                    </div>
				</div>
			</div>
		</div>
    </div>
</div>
<input type="hidden" name="data">
<div style="margin-bottom: 50px;">
    <button class="btn btn-primary" type="submit">保存</button>
    <a href="javascript:history.back();" type="button" class="btn btn-success" >返回</a>
</div>
</form>

<script>
require(['angular','util'],function(angular,util){
    angular.module('app',[]).controller('ctrl',['$scope',function($scope){
        var action = "<?php echo isset($answer)?'edit':'add'; ?>";
        if (action=='add') {
            $scope.data = {
                articles:[{
                    title: 'aa',
                    thumb_media_id: '',
                    thumb: '1.jpg',
                    author: 'aa',
                    digest: 'aa',
                    content: 'ccc',
                    content_source_url: 'http://baidu.com',
                }]
            }
        } else {
            $scope.data = <?php echo json_encode($answer)?:'[]';?>;
        }
        $scope.active=$scope.data.articles[0];
        //当前编辑的图文信息
        $scope.changeActive=function(k){
            $scope.active=$scope.data.articles[k];
        }
        //添加图文
        $scope.add=function(){
            if($scope.data.articles.length==5){
                util.message('图文消息只能添加五条','','error');return;
            }
            var news={
                title: 'aa',
                thumb_media_id: '',
                thumb: '',
                author: 'aa',
                digest: 'aa',
                content: '',
                content_source_url: '',
            };
            $scope.data.articles.push(news);
        }
        //选择图片
        $scope.upImage=function(){
            util.image(function (images) {
                //将图片推送到微信服务器获取media_id
                $.post('{{site_url("site/PushImage")}}', {file: images[0]}, function (json) {
                    console.log(json);
                    if (json.valid == 1) {
                        $scope.active.thumb_media_id = json.data.media_id;
                        $scope.active.thumb = images[0];
                        $scope.$apply();
                    } else {
                        util.message('上传失败,请稍候再试', '', 'warning');
                    }
                }, 'json');
            }, [])
        }
        //图文编辑器
        util.ueditor('container', {}, function (editor) {
            editor.addListener('contentChange', function () {
                $scope.active.content = editor.getContent();
            });
            editor.addListener('ready', function () {
                if (editor && editor.getContent() != $scope.active.content) {
                    editor.setContent($scope.active.content);
                }
                $scope.$watch('active', function (item) {
                    if (editor && editor.getContent() != item.content) {
                        editor.setContent(item.content ? item.content : '');
                    }
                },true);
            });
            editor.addListener('clearRange', function () {
                $scope.active.content = editor.getContent();
                $scope.$apply();
            });
        });
        $("form").submit(function () {
            $("[name='data']").val(angular.toJson($scope.data));
        });
    }]);
    angular.bootstrap(angular.element("#form"),['app']);
});

</script>

</block>